<template>
  <div class="main-box">
    <div class="main">
      <Banner />
      <GoodsAttr />
      <div class="bgc">
        <div class="container">
          <div class="goods-wrap">
            <div class="title">
              配件
              <div class="myMenu">
                <ul>
                  <li @click="index = 0" :class="{ active: index === 0 }">
                    <a href="javascript:;">热门</a>
                  </li>
                  <li @click="index = 1" :class="{ active: index === 1 }">
                    <a href="javascript:;">保护套</a>
                  </li>
                  <li @click="index = 2" :class="{ active: index === 2 }">
                    <a href="javascript:;">充电器</a>
                  </li>
                </ul>
              </div>
            </div>
            <Floor v-if="index === 0" :dataList="accessoryList" />
            <Floor v-else-if="index === 1" :dataList="protectingShellList" />
            <Floor v-else :dataList="chargerList" />
          </div>
        </div>
        <div class="container">
          <div class="goods-wrap">
            <div class="title">
              配件
              <div class="myMenu">
                <ul>
                  <li @click="index2 = 0" :class="{ active: index2 === 0 }">
                    <a href="javascript:;">热门</a>
                  </li>
                  <li @click="index2 = 1" :class="{ active: index2 === 1 }">
                    <a href="javascript:;">电视影音</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <Floor v-if="index2 === 0" :dataList="applianceList" />
        <Floor v-if="index2 === 1" :dataList="miTvList" />
      </div>
    </div>
  </div>
</template>

<script>
import Banner from './Banner'
import GoodsAttr from './goodsattr'
import Floor from '@/components/Floor.vue'

export default {
  name: 'WHome',
  components: {
    Banner,
    GoodsAttr,
    Floor
  },
  data() {
    return {
      applianceList: '', //家电商品列表
      applianceHotList: '', //热门家电商品列表
      accessoryList: '', //配件商品列表
      accessoryHotList: '', //热门配件商品列表
      protectingShellList: '', //保护套商品列表
      chargerList: '', //充电器商品列表
      applianceActive: 1, //家电当前选中的商品列表
      accessoryActive: 1, //配件当前选中的商品列表
      index: 0,
      index2: 1,
      miTvList: '' //小米电视商品列表
    }
  },
  mounted() {
    this.getPromo('电视机', 'miTvList')
    this.getPromo('保护套', 'protectingShellList')
    this.getPromo('充电器', 'chargerList')
    this.getPromo(
      ['电视机', '空调', '洗衣机'],
      'applianceList',
      '/api/product/getHotProduct'
    )
    this.getPromo(
      ['保护套', '保护膜', '充电器', '充电宝'],
      'accessoryList',
      '/api/product/getHotProduct'
    )
  },
  methods: {
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : '/api/product/getPromoProduct'
      this.$axios
        .post(api, {
          categoryName: categoryName
        })
        .then((res) => {
          this[val] = res.data.Product
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    }
  }
}
</script>

<style scoped>
.bgc {
  background-color: #f5f5f5;
}
.main-box {
  background-color: #fff;
}
.main-box .main {
  margin: 0 auto;
}
.container {
  background-color: #f5f5f5;
}
.container .goods-wrap {
  /* border: 1px solid red; */
  margin-top: 20px;
  margin: 0 auto;
  width: 1225px;
}
.container .goods-wrap .title {
  font-size: 22px;
  padding: 15px 0;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.container .goods-wrap .title ul {
  display: flex;
}
.container .goods-wrap .title ul li {
  margin-left: 20px;
}
.container .goods-wrap .goods-outer {
  width: 1300px;
  display: flex;
  flex-wrap: wrap;
}
.container .goods-wrap .new-goods {
  width: 234px;
  height: 300px;
  background-color: #fff;
  text-align: center;
  float: left;
  margin: 14.5px 13.7px 10px 0;
  transition: all 0.2s linear;
}
.container .goods-wrap .new-goods:hover {
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transform: translate3d(0, -2px, 0);
}
.container .goods-wrap .new-goods img {
  width: 160px;
  height: 160px;
}
.container .goods-wrap .new-goods h2 {
  font-size: 14px;
  color: #333;
  margin: 25px 10px 0;
  font-weight: normal;
}
.container .goods-wrap .new-goods h3 {
  color: #b0b0b0;
  margin: 5px 10px;
  font-size: 12px;
}
.container .goods-wrap .new-goods span {
  font-size: 16px;
  color: #ff6700;
}
.container .goods-wrap .new-goods em {
  font-size: 16px;
  color: #b0b0b0;
  margin: 0px 0px 0px 8px;
  text-decoration: line-through;
}
.container .goods-wrap .new-goods .more {
  color: #333;
  font-size: 18px;
  line-height: 300px;
}
</style>
